<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>music</title>
</head>

<body>
    <div id="app">
        <header id="header">
            <div>
                <h3>{{title}}</h3>
            </div>
            <div>
                <input type="text" placeholder="请输入歌名" v-model="search" @keyup.enter="getmusic">
            </div>
        </header>
        <main id="main">
            <div>
                <ul>
                    <li v-for="(item,index) in musicid">
                        <a @click='playermusic(item.id)' @click="getmusicpoto(item.id)"></a>
                        <b>{{item.name}}</b>
                        <span v-if="item.mvid!=0" @click="playermv(item.mvid)"></span>
                    </li>
                </ul>
            </div>
            <div :class="{show:isshow}">
                <img src="https://gzh-1253246719.cos.ap-chengdu.myqcloud.com/vue_music/player_bar.png" alt="图片">
                <img src="https://gzh-1253246719.cos.ap-chengdu.myqcloud.com/vue_music/disc.png" alt="图片">
                <img :src="img==''?'https://gzh-1253246719.cos.ap-chengdu.myqcloud.com/vue_music/cover.png':img" alt="图片">
            </div>
            <div>
                <h4>热门留言</h4>
                <dl v-for="(item,index) in comments" :key="index">
                    <dt>
                        <img :src="item.user.avatarUrl" alt="头像">
                     </dt>
                    <dd>{{item.user.nickname}}</dd>
                    <dd>{{item.content}}</dd>
                </dl>
            </div>
        </main>
        <div class="videos" :style="[mvurl ? offmask : nomask]">
            <video class="video" :src="mvurl" controls="controls"></video>
            <div class="mask" @click="clearmask"></div>
        </div>
        <footer id="footer">
            <div>
                <audio :src="musicURL" autoplay="autoplay" @play="play" @pause="pause" controls="controls" loop="loop">你的浏览器不支持当前播放</audio>
            </div>
        </footer>
    </div>
</body>
<script src="main.js"></script>

</html>